<template>
  <div class="home-container">
    <header class="home-header">
      <h1>MentorX AI创业助手</h1>


      
        
      <div class="feature-list" @mouseleave="showFeatureList = false">
          <div class="feature-header" @mouseenter="showFeatureList = true">
            <span>功能列表</span>
            <i class="arrow" :class="{ 'rotate': showFeatureList }"></i>
          </div>
          <div class="feature-items" v-show="showFeatureList">
            <div 
              v-for="(item, index) in featureList" 
              :key="index"
              class="feature-item" 
              @click="handleFeatureClick(item.id)"
            >
              {{ item.name }}
            </div>
          </div>
      </div>
      
      
      
      
      
      
      <div class="user-info">
        <span>欢迎，{{ userInfo?.username }}</span>
        <button @click="handleLogout" class="logout-btn">退出登录</button>
      </div>
    </header>









    
    <main class="home-main">
      <div class="welcome-section">
        <h2>欢迎来到 MentorX 系统</h2>
        <p>您的 AI 创业助手，为您提供全方位的创业指导和支持</p>
      </div>



      
      <div class="modules-grid">
        <div 
          v-for="(card, index) in moduleCards" 
          :key="index"
          class="module-card"
          @click="handleCardClick(card.id)"
        >
          <h3>{{ card.title }}</h3>
          <p>{{ card.desc }}</p>
        </div>




      </div>


    </main>
  </div>
</template>













<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { logout } from '../api/auth'
import type { UserInfo } from '../api/auth'

const router = useRouter()
const userInfo = ref<UserInfo | null>(null)
const showFeatureList = ref(false)

// 功能列表数据
const featureList = ref([
  { id: 'f0', name: '账号管理' },
  { id: 'f1', name: '1' },
  { id: 'f2', name: '2' },
  { id: 'f3', name: '3' },
  { id: 'f4', name: '4' }
])

// 模块卡片数据
const moduleCards = ref([
  { id: 'aimentor', title: 'AI Mentor', desc: '智能顾问，提供个性化创业指导' },
  { id: 'market', title: '市场洞察', desc: '行业趋势分析与竞品调研' },
  { id: 'process', title: '创业流程', desc: '流程模拟与材料导航' },
  { id: 'report', title: '项目汇报', desc: '自动生成汇报文件' },
  { id: 'company', title: '公司管理', desc: '智能财务报表与分析' },
  { id: 'other', title: '0', desc: '1' }
])



// 功能项点击事件处理
const handleFeatureClick = (featureId: string) => {
  console.log('点击了功能:', featureId)
  // 这里可以根据不同的 featureId 执行不同的逻辑
  switch (featureId) {
    case 'f0':
      // 点击 "账号管理" 跳转到 User 页面
      console.log('跳转到 UserUser 页面')
      router.push('/User')
      break
    case 'account':
      // 账号管理逻辑
      console.log('跳转到账号管理页面')
      // router.push('/account')
      break
    case 'feature1':
      // 功能1逻辑
      console.log('执行功能1')
      break
    case 'feature2':
      // 功能2逻辑
      console.log('执行功能2')
      break
    case 'feature3':
      // 功能3逻辑
      console.log('执行功能3')
      break
    case 'feature4':
      // 功能4逻辑
      console.log('执行功能4')
      break
    default:
      console.log('未知功能')
  }
}

// 模块卡片点击事件处理
const handleCardClick = (cardId: string) => {
  console.log('点击了模块卡片:', cardId)
  // 这里可以根据不同的 cardId 执行不同的逻辑
  switch (cardId) {
    case 'aimentor':
      console.log('跳转到 AI Mentor 页面')
      // router.push('/aimentor')
      break
    case 'market':
      console.log('跳转到市场洞察页面')
      // router.push('/market')
      break
    case 'process':
      console.log('跳转到创业流程页面')
      // router.push('/process')
      break
    case 'report':
      console.log('跳转到项目汇报页面')
      // router.push('/report')
      break
    case 'company':
      console.log('跳转到公司管理页面')
      router.push('/company')
      break
    case 'other':
      console.log('点击了其他功能')
      break
    default:
      console.log('未知模块')
  }
}

onMounted(() => {
  const userStr = localStorage.getItem('user')
  if (userStr) {
    userInfo.value = JSON.parse(userStr)
  }
})

const handleLogout = async () => {
  try {
    await logout()
    localStorage.removeItem('user')
    router.push('/login')
  } catch (error) {
    // 即使失败也清空本地存储
    localStorage.removeItem('user')
    router.push('/login')
  }
}
</script>





















<style scoped>
/*主背景容器*/
.home-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-top: 80px; /* 为固定头部预留空间 */


}

/*上悬浮栏*/
.home-header {
  background: white;
  padding: 20px 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;

  height: 10%;
  
  /* 固定定位 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 确保在其他元素之上 */
  
}


















/* 功能列表容器 */
.feature-list {
  position: relative;

   

  border: 5px solid blue !important;

}

/* 功能列表标题 */
.feature-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.feature-header:hover {
  background-color: #f5f5f5;
}

.feature-header span {
  font-size: 16px;
  color: #666;
}

/* 下拉箭头 */
.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #666;
  transition: transform 0.3s;
}

.arrow.rotate {
  transform: rotate(180deg);
}

/* 功能项列表 */
.feature-items {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  min-width: 150px;
  z-index: 1000;
  margin-top: 5px;

  
}

/* 功能项 */
.feature-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-bottom: 1px solid #f0f0f0;
  text-align: center; /* 功能项文字水平居中 */
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-item:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

























/*上h1*/
.home-header h1 {
  color: #333;
  margin: 0;

  
}


/*上悬浮右侧元素捆绑包*/
.user-info {
  display: flex;
  align-items: center;
  gap: 30px;


border: 5px solid red !important;

}


.user-info span {
  color: #666;
}

.logout-btn {
  padding: 8px 20px;
  background: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.logout-btn:hover {
  background: #f45454;
}

.home-main {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-section {
  text-align: center;
  margin-bottom: 40px;
}

.welcome-section h2 {
  color: #333;
  font-size: 32px;
  margin-bottom: 10px;
}

.welcome-section p {
  color: #666;
  font-size: 16px;
}


/* 响应式卡片容器 - 智能布局系统 */
.modules-grid {
  display: grid;
  gap: 20px;                    /* 卡片间距：20像素 */
  
  /* 移动端优先：默认1列布局 */
  grid-template-columns: 1fr;
}

/* 平板端：≥768px 显示2列 */
@media (min-width: 768px) {
  .modules-grid {
    grid-template-columns: repeat(2, 1fr);  /* repeat()函数：创建2个等宽列 */
  }
}

/* 小屏桌面：≥1024px 显示3列 */
@media (min-width: 1024px) {
  .modules-grid {
    grid-template-columns: repeat(3, 1fr);  /* 3列等宽网格 */
  }
}

/* 大屏桌面：≥1440px 显示4列 */
@media (min-width: 1440px) {
  .modules-grid {
    grid-template-columns: repeat(4, 1fr);  /* 4列等宽网格 */
  }
}

/* 超大屏：≥1600px 显示5列 */
@media (min-width: 1600px) {
  .modules-grid {
    grid-template-columns: repeat(5, 1fr);  /* 5列等宽网格，全部卡片一行显示 */
  }
}


/* 响应式正方形卡片 - 专业比例设计 */
.module-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;  /* transition: 平滑动画过渡 */
  cursor: pointer;
  
  /* 正方形核心：宽高比1:1 */
  aspect-ratio: 1 / 1;  /* aspect-ratio: CSS函数，强制元素保持正方形比例 */
  
  /* Flexbox居中：让内容垂直水平居中 */
  display: flex;                    /* display: flex - 启用弹性布局 */
  flex-direction: column;         /* flex-direction: column - 垂直排列子元素 */
  justify-content: center;        /* justify-content: center - 垂直方向居中 */
  align-items: center;            /* align-items: center - 水平方向居中 */
  text-align: center;             /* text-align: center - 文字居中 */
  
  /* 响应式内边距 */
  padding: 20px;  /* 默认小内边距 */
}

/* 平板及以上：恢复大内边距 */
@media (min-width: 768px) {
  .module-card {
    padding: 30px;  /* 大屏大内边距 */
  }
}

/* 正方形卡片响应式优化 */
@media (max-width: 767px) {
  /* 移动端小屏幕：减小字体以适应正方形 */
  .module-card h3 {
    font-size: 18px;  /* 比原来的20px略小 */
    margin-bottom: 8px;
  }
  
  .module-card p {
    font-size: 12px;  /* 比原来的14px略小 */
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* 平板：适中字体 */
  .module-card h3 {
    font-size: 19px;
  }
  
  .module-card p {
    font-size: 13px;
  }
}


/*卡片悬浮阴影*/
.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}


/*卡片标题*/
.module-card h3 {
  color: #667eea;
  margin: 0 0 10px 0;
  font-size: 20px;


}


/*卡片内容*/
.module-card p {
  color: #666;
  margin: 0;
  font-size: 14px;

  

}
</style>